<template>
  <div id="app" class="cantainer">
    <Brand></Brand>
    <!-- <h1>按需导入</h1>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row> -->

    <!-- <h1>品牌管理</h1>
    <hr />
    <div class="form-group well">
      <input
        v-model.trim="brandname"
        @keyup="add"
        type="text"
        placeholder="请输入品牌名称"
        class="form-control"
      />
    </div>
    <hr /> -->
    <!-- <router-link exact class="btn btn-info" tag="button" to="home?from=baidu&ip=127.90.89.1">首页</router-link>
    <router-link class="btn btn-success" tag="button" to="about">关于我们</router-link>
    <router-link tag="button" class="btn btn-danger" to="news">行业新闻</router-link>
    <router-link tag="button" class="btn btn-primary" to="login">登录</router-link>
    <router-link tag="button" class="btn btn-dafault" to="love">猜你喜欢</router-link>
    <router-view /> -->
    <!-- <table class="table table-bordered">
      <thead>
        <tr>
          <th>序号</th>
          <th>品牌</th>
          <th>时间</th>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.ctime }}</td>
          <td>
            <button class="btn btn-danger" @click="del(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table> -->

    <!-- <Home></Home> -->
    <!-- <Login></Login> -->
    <!-- <Wrap></Wrap> -->
    <!-- <Box></Box>
   <Box1></Box1> -->
    <!-- <Music></Music>
    -->
    <!-- <Lists>
      <template v-slot="goods">
        <label>
          <input type="radio" name="goods" >
          {{goods.row.name}}

        </label>
      </template>
    </Lists> -->

    <!-- <HelloWorld/> -->
    <!-- <hello/>
    <button @click='pageName="Home"' class="btn btn-success">首页</button>
    <button @click='pageName="About"' class="btn btn-danger">关于我们</button>
    <button @click='pageName="Concat"' class="btn btn-info" >联系我们</button>
    <component :is='pageName'></component> -->
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld'
// import hello from './components/hello'
// import Concat from './components/Concat'
// import About from './components/About'
// import Home from './components/Home'
// import Login from './components/Login'
// import Wrap from './components/Wrap'
// import Box from './components/Box'
// import Box1 from './components/Box1'
// import Music from './components/Music'
// import Lists from './components/Lists'
// import axios from "axios";
import Brand from './components/Brand'

export default {
  name: "App",
  data() {
    return {
      list: "",
      // pageName:'List'
      brandname: "",
    };
  },
  // created() {
  //   this.getList();
  // },
  // // axios.post('http://localhost:3333/brand',`name=${this.brandname}`).then({data}=>{
  // //     if()}

  // //   )

  // methods: {
  //   add(event) {
  //     if (event.keyCode == 13) {
  //       if (this.brandname == "") return alert("请输入品牌名称");
  //     }
  //     this.axios.post("/brand", `name=${this.brandname}`).then((data) => {
  //       if (data.status == 0) {
  //         this.getList();
  //       }
  //     });
  //   },
  //   del(id) {
  //     this.axios.delete(`/brand/${id}?name=zs`).then((data) => {
  //       if (data.status == 0) {
  //         // 更新品牌列表
  //         this.getList();
  //       }
  //     });
  //   },
  //   getList() {
  //     axios({
  //       method: "GET",
  //       url: "http://localhost:3333/brand",
  //     }).then((res) => {
  //       if (res.data.status == 0) {
  //         this.list = res.data.message;
  //       }
  //     });
  //   },
  // },
  components: {
    Brand
    // HelloWorld,
    // hello,
    // Home
    // 'my-element':Element
    // Login
    // Box,
    // Box1
    // Music
    // Lists
  },
};
</script>

<style>
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>
